<script setup lang="ts">
// 确保 vue-router 已正确安装
import { RouterView } from 'vue-router'
import BottomNav from './components/BottomNav.vue'
</script>

<template>
  <RouterView />
  <BottomNav />
</template>

<style>
#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  /* 设置最大宽度匹配iPhone 14 Pro Max */
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 添加视口相关的meta标签样式 */
@viewport {
  width: device-width;
  viewport-fit: cover;
}

/* 基础样式重置 */
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  /* 禁用页面弹性滚动 */
  overscroll-behavior: none;
  /* 设置安全区域 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 移动端点击高亮去除 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 设置页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  /* 设置最大宽度匹配iPhone 14 Pro Max */
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 添加视口相关的meta标签样式 */
@viewport {
  width: device-width;
  viewport-fit: cover;
}

/* 基础样式重置 */
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  /* 禁用页面弹性滚动 */
  overscroll-behavior: none;
  /* 设置安全区域 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 移动端点击高亮去除 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 设置页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>